<template>
	<div class="classDetail">
		<div class="class_top">
			<image :src="classItemsDetail.image" class="class_top_img" mode=""></image>
			<div class="class_card">
				<div class="class_card_top">
					<div class="class_card_top_left">
						{{classItemsDetail.title || ''}}
					</div>
					<!-- 1报名中 2已完成 -->
					<div class="class_card_top_right">
						{{classItemsDetail.status == 1?'报名中':'已完成'}}
					</div>
				</div>
				<div class="class_card_cont">
					<div class="class_card_items">
						<image src="https://wx.sjcmhz.com/static/image/class0.png" mode=""></image>
						<!-- {{classItemsDetail.date || ''}} -->
						{{classItemsDetail.time || ''}}
					</div>
					<div class="class_card_items">
						<image src="https://wx.sjcmhz.com/static/image/class1.png" style="height: 24rpx;width: 18rpx;"
							mode=""></image>
						{{classItemsDetail.address || ''}}
					</div>
					<div class="class_card_items">
						<image src="https://wx.sjcmhz.com/static/image/class2.png" style="height: 24rpx;width: 20rpx;"
							mode=""></image>
						难度： {{classItemsDetail.model || ''}}
					</div>
					<!-- <div class="class_card_items_act">
						课程负责人：{{classItemsDetail.name || ""}}
						<div class="class_card_items_btn" @click='callPhone()'> 电询 </div>
					</div> -->

				</div>

			</div>
		</div>
		<!-- title -->
		<div class="bmBox">
			<div class="class_title">
				<div class="class_title_left">

				</div>
				<div class="class_title_right">
					已报名({{avatar_url.length || '0'}}/{{classItemsDetail.number || '0'}})
				</div>
			</div>

			<div class="class_more">
				<div class="class_more_item" v-for="(ite,idx) in avatar_url" :key="idx" v-if='idx<=showIdx'>
					<image :src="ite.avatar_url" mode=""></image>
				</div>
				<div class="class_more_img" v-if='avatar_url.length > 5' @click='showMoreEvent()'>
					<image src="https://wx.sjcmhz.com/static/image/classMore.png" mode=""></image>
				</div>
			</div>
		</div>
		<!-- 介绍 -->
		<div class="jsBox">
			<div class="jsBox_left">
				<image :src="classItemsDetail.avatar_url" mode=""></image>
			</div>
			<div class="jsBox_right">
				<div class="jsBox_right_top">
					{{classItemsDetail.name || ''}}
				</div>
				<div class="jsBox_right_bottom ex">
					{{classItemsDetail.sub_title || ''}}
				</div>
			</div>
		</div>
		<!-- cont -->
		<!-- title -->
		<div class="xzBox">
			<div class="class_title">
				<div class="class_title_left">

				</div>
				<div class="class_title_right">
					课程须知
				</div>
			</div>
			<div class="xzBox_cont">
				<!-- {{classItemsDetail.content || ''}} -->
				<rich-text :nodes="content"></rich-text>
			</div>
		</div>
		<!-- 评分 -->
		<div class="xzBox downBottom" v-if="classsCommentList.length > 0">
			<div class="class_title">
				<div class="class_title_left">

				</div>
				<div class="class_title_right">
					用户评分
				</div>
				<div class="class_more_btn">
					更多 <u-icon slot="right" name="arrow-right" color='#999999'></u-icon>
				</div>
			</div>
			<div class="xzBox_cont">
				<pjllist :pjList='classsCommentList'></pjllist>
			</div>
		</div>
		<!-- bottom -->
		<div class="class_bottom">
			<div class="class_bottom_left">
				<!-- opacity: 0; -->
				<button open-type="share" style="border:none !important;" class="class_bottom_items_botton">
					<div class="class_bottom_items">
						<div class="class_bottom_items_top">
							<image src="https://wx.sjcmhz.com/static/image/fx.png" mode=""></image>
						</div>
						<div class="class_bottom_items_bottom">
							分享
						</div>
					</div>
				</button>
				<div class="class_bottom_items">
					<div class="class_bottom_items_top">
						<image src="https://wx.sjcmhz.com/static/image/fx.png" mode=""></image>
					</div>
					<div class="class_bottom_items_bottom">


						分享
					</div>
				</div>
				<div class="class_bottom_items" @click='callPhone()'>
					<div class="class_bottom_items_top">
						<image src="@/static/image/er.png" mode=""></image>
					</div>
					<div class="class_bottom_items_bottom">
						加我企微
					</div>
				</div>
			</div>
			<div class="class_bottom_right" :class="classItemsDetail.is==0?'':'colorHui'" @click='classYYEvent()'>
				{{classItemsDetail.is == 0?'立即预约':'已预约'}}
			</div>

		</div>
		<div style="width: 100%;height: 200rpx;">

		</div>

		<u-modal :show="show" @confirm="confirm" :title='modalTitle' @cancel='show=!show' ref="uModal" showCancelButton>
		</u-modal>

		<!-- 二维码 -->
		<div class="allMask" v-if='erShow' @click='erShow = false'>

		</div>
		<div class="class_er" v-if="erShow" @longpress="DownImg">
			<image :src="httpImgUrl" mode=""></image>
			<div class="class_er_text">
				长按识别添加老师企微， <br />
				请务必添加老师微
			</div>
		</div>
	</div>
</template>

<script>
	import pjllist from './components/pjlist.vue'
	export default {
		components: {
			pjllist
		},
		data() {
			return {
				classId: 1,
				classItemsDetail: '',
				avatar_url: [],
				showIdx: 4,
				classsCommentList: [], //评论，
				show: false,
				modalTitle: '是否确认预约此课程？',
				erShow: false,
				httpImgUrl: '',
				time_id: '',
				content: '',
				isClick:false
			}
		},
		onLoad(opt) {
			this.classId = opt.id || 52
			this.time_id = opt.time_id || 436
			this.getClassDetail()
			this.getClasssComment()
		},
		onShareAppMessage(res) {
			//console.log('onShareAppMessage',res);
			return {
				title: this.classItemsDetail.title,
				imageUrl: this.classItemsDetail.image,
				path: '/pages/class/classDetail?id=' + this.classItemsDetail.class_id,
			}
		},
		methods: {
			showMoreEvent() {
				this.showIdx == 4 ? this.showIdx = 999 : this.showIdx = 4
			},
			async getClassDetail(type, time) {
				const {
					data
				} = await this.$request(this.$Api.classsDetail, {
					class_id: this.classId,
					time_id: this.time_id
				}, "POST")
				if (data.code !== 0) return
				this.classItemsDetail = data.data.list
				this.avatar_url = data.data.avatar_url
				this.httpImgUrl = data.data.list.code
				var richtext = this.classItemsDetail.content;
				const regex = new RegExp('<img', 'gi');
				richtext = richtext.replace(regex, `<img style="max-width: 100%;"`)
				this.content = richtext;
			},
			// 获取评论
			async getClasssComment() {
				const {
					data
				} = await this.$request(this.$Api.classsComment, {
					class_id: this.classId,
					page: 1
				}, "POST")
				if (data.code !== 0) return
				this.classsCommentList = data.data.list
			},
			classYYEvent() {
				if (this.classItemsDetail.is == 1) return
				this.show = true
			},
			// 预约
			async confirm() {
				uni.showLoading({
					title: '预约中，请耐心等待...',
					mask:true,
					icon:'none'
				})
				if(this.isClick) return
				this.isClick = true
				const {
					data
				} = await this.$request(this.$Api.classsPut, {
					class_id: this.classId,
					time_id: this.time_id
				}, "POST")
				setTimeout(() => {
					uni.hideLoading()
					this.isClick = false
				}, 800)
				if (data.code !== 0) return
				uni.showToast({
					title: '预约成功',
					icon: 'none'
				})
				this.show = false
				this.getClassDetail()
				this.getClasssComment()
				// uni.navigateTo({
				// 	url: '/pages/class/classyuyue'
				// })
			},
			callPhone(phoneNumber) {
				this.erShow = true
				return
				uni.makePhoneCall({
					phoneNumber: this.classItemsDetail.phone, // 电话号码
					success: function() {
						console.log('拨号成功');
					},
					fail: function() {
						console.log('拨号失败');
					}
				});
			},
			// 下载图片
			DownImg() {
				console.log("长按触发");
				console.log("httpImgUrl", this.httpImgUrl);
				// 假设你有一个网络图片的链接
				let imageUrl = this.httpImgUrl;
				// 下载图片
				uni.downloadFile({
					url: imageUrl,
					success: downloadResult => {
						if (downloadResult.statusCode === 200) {
							// 下载成功，保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										icon: 'none',
										title: '图片保存成功'
									});
								},
								fail: () => {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.classDetail {
		// margin-bottom: 200rpx;
	}

	.class_top {
		width: 750rpx;
		position: relative;
		height: 542rpx;


		.class_top_img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}

		.class_card {
			width: 684rpx;
			height: 288rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: absolute;
			left: 32rpx;
			top: 500rpx;
			padding: 0 28rpx;
			box-sizing: border-box;

			.class_card_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 104rpx;
				border-bottom: 1rpx solid #DDDDDD;
				margin-bottom: 20rpx;

				.class_card_top_left {
					font-size: 32rpx;
				}

				.class_card_top_right {
					color: #9013FE;
					font-size: 28rpx;

				}
			}

			.class_card_items {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 24rpx;
				color: #666;
				margin-top: 16rpx;

				image {
					width: 22rpx;
					height: 22rpx;
					margin-right: 20rpx;
				}

			}

			.class_card_items_act {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				color: #2E61FF;
				font-size: 24rpx;
				margin-top: 20rpx;

				.class_card_items_btn {
					width: 90rpx;
					height: 34rpx;
					background: #2E61FF;
					border-radius: 17rpx;
					// border: 2rpx solid #2E61FF;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 34rpx;

					margin-left: 28rpx;
				}
			}

		}
	}

	.class_title {
		align-items: center;
		display: flex;
		height: 80rpx;
		position: relative;

		.class_more_btn {
			color: #999999;
			font-size: 26rpx;
			position: absolute;
			right: 0;
			top: 24rpx;
			display: flex;
		}

	}

	.class_title_left {
		width: 12rpx;
		height: 30rpx;
		background: #9013FE;

		margin-right: 10rpx;

	}

	.class_title_right {
		font-size: 28rpx;
		font-weight: bold;
	}

	.bmBox {
		width: 684rpx;
		min-height: 164rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 270rpx auto 0 auto;
		padding: 0 24rpx;
		box-sizing: border-box;
		padding-bottom: 22rpx;


		.class_more {
			align-items: center;
			display: flex;
			margin-top: 10rpx;
			flex-wrap: wrap;
			position: relative;

			.class_more_img {
				position: absolute;
				right: -6rpx;
				top: -6rpx;
				z-index: 1;
				width: 68rpx;
				height: 68rpx;
			}

			.class_more_item {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				background: #eee;
				margin-bottom: 10rpx;

				image {
					border-radius: 50%;
				}


			}
		}
	}

	.jsBox {
		width: 684rpx;
		height: 132rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
		margin: 24rpx auto 0 auto;

		.jsBox_left {
			width: 80rpx;
			height: 80rpx;
			border: 4rpx solid #FFFFFF;

			image {
				border-radius: 50%;
			}
		}

		.jsBox_right {
			font-size: 28rpx;
			margin-left: 18rpx;

			.jsBox_right_bottom {
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
			}
		}
	}

	.xzBox {
		width: 684rpx;
		min-height: 150rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 24rpx 24rpx 24rpx;
		box-sizing: border-box;
		margin: 24rpx auto 0 auto;

		.xzBox_cont {
			font-size: 26rpx;
			color: #666;

			img {
				max-width: 750rpx !important;
			}
		}

	}

	.downBottom {
		margin-bottom: 250rpx;
	}

	.class_bottom {
		width: 100%;
		height: 104rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.class_bottom_left,
		.class_bottom_right {
			width: 50%;
			height: 100%;
			font-size: 20rpx;


		}

		.class_bottom_left {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 75rpx;
			box-sizing: border-box;
			position: relative;

			button {
				border: none !important;
				background: none !important;
				padding: 0;
				margin: 0;
				position: absolute;
				bottom: 0rpx;
				left: 76rpx;
				opacity: 0;
			}
		}

		.class_bottom_items {
			width: 80rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			.class_bottom_items_botton {
				position: absolute;
				left: 0;
				top: 0;
			}

		}

		.class_bottom_items_top {
			width: 40rpx;
			height: 40rpx;
		}

		.class_bottom_items_bottom {
			font-size: 20rpx;
			text-align: center;
			margin-top: 10rpx;
			width: 80rpx;

		}

		.class_bottom_right {
			background: #9013FE;
			color: #fff;
			text-align: center;
			line-height: 104rpx;
			font-size: 32rpx;
		}
	}

	.colorHui {
		background: #666 !important;
		color: #fff !important;
	}

	// 二维码
	.class_er {
		width: 520rpx;
		min-height: 520rpx;
		background: #FFFFFF;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -260rpx;
		margin-top: -460rpx;
		padding: 24rpx;
		box-sizing: border-box;
		z-index: 9999;
		display: flex;
		flex-wrap: wrap;

		.class_er_text {
			font-size: 28rpx;
			color: #666;
			width: 100%;
			height: 96rpx;
			text-align: center;
			margin-top: 40rpx;
		}

		image {
			width: 520rpx;
			height: 520rpx;
		}
	}
</style>
